<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>利用element组件库实现sku规格配置及展示 | 爆米花小布</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/favicon.ico">
    <script defer="defer" async="async" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script>
    <meta name="description" content=" ">
    
    <link rel="preload" href="/assets/css/0.styles.54de4a22.css" as="style"><link rel="preload" href="/assets/js/app.36e8cb25.js" as="script"><link rel="preload" href="/assets/js/2.cd8e88cf.js" as="script"><link rel="preload" href="/assets/js/8.6c6d5662.js" as="script"><link rel="prefetch" href="/assets/js/10.5a175a73.js"><link rel="prefetch" href="/assets/js/11.7c8d5810.js"><link rel="prefetch" href="/assets/js/12.c77aca0d.js"><link rel="prefetch" href="/assets/js/13.fc475cb0.js"><link rel="prefetch" href="/assets/js/14.517ed6e7.js"><link rel="prefetch" href="/assets/js/15.7dc9cc39.js"><link rel="prefetch" href="/assets/js/16.4223237a.js"><link rel="prefetch" href="/assets/js/17.0e3dcd26.js"><link rel="prefetch" href="/assets/js/18.132512c7.js"><link rel="prefetch" href="/assets/js/19.55275db3.js"><link rel="prefetch" href="/assets/js/20.621b52a1.js"><link rel="prefetch" href="/assets/js/21.daa66e46.js"><link rel="prefetch" href="/assets/js/22.537fd259.js"><link rel="prefetch" href="/assets/js/23.81c79725.js"><link rel="prefetch" href="/assets/js/24.ee80a08c.js"><link rel="prefetch" href="/assets/js/25.260c7616.js"><link rel="prefetch" href="/assets/js/26.03e10148.js"><link rel="prefetch" href="/assets/js/27.768e5af1.js"><link rel="prefetch" href="/assets/js/28.ad0f08eb.js"><link rel="prefetch" href="/assets/js/29.9e188b97.js"><link rel="prefetch" href="/assets/js/3.9cba588d.js"><link rel="prefetch" href="/assets/js/30.f2aa9a7c.js"><link rel="prefetch" href="/assets/js/31.93c74095.js"><link rel="prefetch" href="/assets/js/32.4735eb89.js"><link rel="prefetch" href="/assets/js/33.7b05518b.js"><link rel="prefetch" href="/assets/js/34.3db00b39.js"><link rel="prefetch" href="/assets/js/35.ea9a0227.js"><link rel="prefetch" href="/assets/js/36.5873bde7.js"><link rel="prefetch" href="/assets/js/37.2cbd5350.js"><link rel="prefetch" href="/assets/js/38.6c2de9e4.js"><link rel="prefetch" href="/assets/js/39.d3c0116f.js"><link rel="prefetch" href="/assets/js/4.97aec80c.js"><link rel="prefetch" href="/assets/js/40.47b05f9f.js"><link rel="prefetch" href="/assets/js/41.5dfb852e.js"><link rel="prefetch" href="/assets/js/42.1d7cf4c2.js"><link rel="prefetch" href="/assets/js/43.43f59d94.js"><link rel="prefetch" href="/assets/js/44.19309bf6.js"><link rel="prefetch" href="/assets/js/45.dbee3f0a.js"><link rel="prefetch" href="/assets/js/46.a373745d.js"><link rel="prefetch" href="/assets/js/5.bc4ebf1d.js"><link rel="prefetch" href="/assets/js/6.805bb5f3.js"><link rel="prefetch" href="/assets/js/7.9724c5a3.js"><link rel="prefetch" href="/assets/js/9.641efeda.js">
    <link rel="stylesheet" href="/assets/css/0.styles.54de4a22.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">爆米花小布</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/element-ui/el-table-select-all/" class="nav-link">
  前端博客
</a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-element-dict/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  PC端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-vant-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  移动端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/element-ui/el-table-select-all/" class="nav-link">
  前端博客
</a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-element-dict/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  PC端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://shenxiaobu.github.io/vue-vant-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  移动端字典插件包
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Element-ui组件使用经验</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/element-ui/el-table-select-all/" class="sidebar-link">使用el-table实现全选功能</a></li><li><a href="/element-ui/el-table-sku/" aria-current="page" class="active sidebar-link">利用element实现sku规格相关功能</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#涉及技术点" class="sidebar-link">涉及技术点</a></li><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#el-select下拉选项新增删除按钮" class="sidebar-link">el-select下拉选项新增删除按钮</a></li><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#阻止回车事件弹开的弹框会默认确认的问题" class="sidebar-link">阻止回车事件弹开的弹框会默认确认的问题</a></li><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#合并表格列相同项" class="sidebar-link">合并表格列相同项</a></li><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#动态表单校验问题" class="sidebar-link">动态表单校验问题</a></li><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#排列组合使用笛卡尔积" class="sidebar-link">排列组合使用笛卡尔积</a></li><li class="sidebar-sub-header"><a href="/element-ui/el-table-sku/#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/element-ui/el-cropper/" class="sidebar-link">利用vue-cropper实现图片裁剪功能</a></li><li><a href="/element-ui/el-form-nesting/" class="sidebar-link">el-form嵌套表单校验</a></li><li><a href="/element-ui/el-theme/" class="sidebar-link">使用element-ui组件库实现主题切换功能</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JS必备知识</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/JS/call-apply-bind/" class="sidebar-link">js中的call、apply和bind</a></li><li><a href="/JS/debounce-throttle/" class="sidebar-link">JS中防抖与节流的讲解与封装</a></li><li><a href="/JS/tree-data/" class="sidebar-link">JS中树形结构数据相关方法</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>CSS实战经验</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/CSS/contour-layout/" class="sidebar-link">css实现等高布局</a></li><li><a href="/CSS/fixed-aspect-ratio/" class="sidebar-link">css实现固定宽高比</a></li><li><a href="/CSS/draw-triangle/" class="sidebar-link">CSS画一个三角形</a></li><li><a href="/CSS/draw-ring/" class="sidebar-link">CSS画一个环形进度条</a></li><li><a href="/CSS/pseudo-class/" class="sidebar-link">伪类和伪元素的区别与使用</a></li><li><a href="/CSS/clear-float/" class="sidebar-link">清除浮动的原理与时机</a></li><li><a href="/CSS/layout/" class="sidebar-link">三栏布局问题（左右固定宽度 中间自适应）</a></li><li><a href="/CSS/flex/" class="sidebar-link">flex布局祥解</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>实用的npm包</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/npm/xiaobu-pic-zoom/" class="sidebar-link">xiaobu-pic-zoom图片放大镜</a></li><li><a href="/npm/vue-message-code/" class="sidebar-link">vue-message-code短信验证码</a></li><li><a href="/npm/xiaobu-water-marker/" class="sidebar-link">xiaobu-water-marker水印</a></li><li><a href="/npm/vue-flutter/" class="sidebar-link">vue-flutter漂浮动画</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>VUE小妙招</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-config/search-menu/" class="sidebar-link">利用fuse.js实现搜索菜单功能</a></li><li><a href="/vue-config/alias/" class="sidebar-link">vue项目配置别名</a></li><li><a href="/vue-config/svg-sprite-loader/" class="sidebar-link">vue项目配置使用svg图标</a></li><li><a href="/vue-config/vue-mode-env/" class="sidebar-link">vue项目的模式和环境变量</a></li><li><a href="/vue-config/system-config/" class="sidebar-link">vue项目配置系统变量</a></li><li><a href="/vue-config/axios-optimization-one/" class="sidebar-link">vue项目axios请求优化（一）</a></li><li><a href="/vue-config/axios-optimization-two/" class="sidebar-link">vue项目axios请求优化（二）</a></li><li><a href="/vue-config/axios-optimization-three/" class="sidebar-link">vue项目axios请求优化（三）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>前端工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tool/use-nvm/" class="sidebar-link">nvm的使用</a></li><li><a href="/tool/vscode/sftp/" class="sidebar-link">vscode插件之sftp</a></li><li><a href="/tool/vscode/koroFileHeader/" class="sidebar-link">vscode插件之koroFileHeader</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="利用element组件库实现sku规格配置及展示"><a href="#利用element组件库实现sku规格配置及展示" class="header-anchor">#</a> 利用element组件库实现sku规格配置及展示</h1> <p><strong>话不多说，先上一波示例。</strong></p> <div class="demo-block demo-element-ui demo-"><div class="source-bg" style="padding:24px;"><div class="item-box" data-v-803b8c9e><div class="title-box" data-v-803b8c9e>
    规格配置（SKU）
  </div> <div class="item-content-box" data-v-803b8c9e><form class="el-form"><div class="el-form-item"><label for="testEdit" class="el-form-item__label" style="width:140px;">测试编辑功能：</label><div class="el-form-item__content" style="margin-left:140px;"><div role="switch" class="el-switch"><input type="checkbox" name="" true-value="true" class="el-switch__input"><!----><span class="el-switch__core" style="width:40px;"></span><!----></div><!----></div></div> <div class="el-form-item"><label for="skuItem" class="el-form-item__label" style="width:140px;">商品规格：</label><div class="el-form-item__content" style="margin-left:140px;"><div class="sku-item-content" data-v-94e60d72><form class="el-form sku-item-form" style="display:none;" data-v-94e60d72></form> <div class="add-sku" data-v-94e60d72>+ 配置新的规格项目</div></div><!----></div></div> <div class="el-form-item"><label for="isUploadImg" class="el-form-item__label" style="width:140px;">上传规格图片：</label><div class="el-form-item__content" style="margin-left:140px;"><div role="switch" class="el-switch"><input type="checkbox" name="" true-value="true" class="el-switch__input"><!----><span class="el-switch__core" style="width:40px;"></span><!----></div><!----></div></div> <div class="el-form-item"><label for="skuTable" class="el-form-item__label" style="width:140px;">规格明细：</label><div class="el-form-item__content" style="margin-left:140px;"><div class="sku-table-box" data-v-c672648c><form class="el-form" data-v-c672648c><div class="el-table el-table--fit el-table--enable-row-hover" data-v-c672648c><div class="hidden-columns"></div><div class="el-table__header-wrapper"><table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:;"><colgroup></colgroup><thead><tr></tr></thead></table></div><div class="el-table__body-wrapper is-scrolling-none"><table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width:;"><colgroup></colgroup><tbody><!----></tbody></table><div class="el-table__empty-block" style="width:;height:100%;"><span class="el-table__empty-text">暂无数据</span></div><!----></div><!----><!----><!----><!----><div class="el-table__column-resize-proxy" style="display:none;"></div></div></form> <button type="button" class="el-button batch-configuration el-button--primary" style="display:none;" data-v-c672648c><!----><!----><span>批量配置</span></button> <div class="el-dialog__wrapper" style="display:none;" data-v-c672648c><div role="dialog" aria-modal="true" aria-label="批量配置" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">批量配置</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><div class="el-dialog__footer"><span class="dialog-footer" data-v-c672648c><button type="button" class="el-button el-button--default" data-v-c672648c><!----><!----><span>取 消</span></button> <button type="button" class="el-button el-button--primary" data-v-c672648c><!----><!----><span>确 定</span></button></span></div></div></div> <div class="cropper_model" data-v-724d3783 data-v-c672648c><div class="el-dialog__wrapper cropper_model_dlg" style="display:none;" data-v-724d3783><div role="dialog" aria-modal="true" aria-label="图片剪裁" class="el-dialog" style="margin-top:15vh;width:900px;"><div class="el-dialog__header"><span class="el-dialog__title">图片剪裁</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><div class="el-dialog__footer"><div class="dialog-footer" data-v-724d3783><button type="button" class="el-button el-button--default el-button--small" data-v-724d3783><!----><!----><span>取 消</span></button> <button type="button" class="el-button el-button--primary el-button--small" data-v-724d3783><!----><!----><span>确定上传</span></button></div></div></div></div></div> <div class="el-dialog__wrapper" style="display:none;" data-v-c672648c><div role="dialog" aria-modal="true" aria-label="图片预览" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">图片预览</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div><!----></div></div> <div class="el-form-item"><!----><div class="el-form-item__content" style="margin-left:140px;"><div class="btn-box" style="text-align:right;margin-top:40px;"><button type="button" class="el-button el-button--primary"><!----><!----><span>测试提交表单校验</span></button></div><!----></div></div></form></div></div></div> <div class="meta"><div class="description"><p>本示例中可配置是否上传规格图片，预设规格选项（规格名、规格值），新增规格选项（规格名、规格值），图片裁剪，批量配置，表单校验</p></div> <div class="sourceCode"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>item-box</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>title</span><span class="token punctuation">&gt;</span></span>
      规格配置（SKU）
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>content</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuForm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuFormRules<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuForm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>140px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>测试编辑功能：<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>testEdit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuForm.testEdit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleEditChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#13ce66<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inactive-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#ff4949<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-switch</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>商品规格：<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuItem<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sku-item</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuItem<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:editSkuInfo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuItemData.skuInfo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:config</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuItemConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:skuList</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@updateSkuInfo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>updateSkuInfo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@deleteSkuValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>deleteSkuValue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@deleteSkuName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>deleteSkuName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@addSkuValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addSkuValue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@addSkuName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addSkuName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sku-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>上传规格图片：<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isUploadImg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuForm.isUploadImg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#13ce66<span class="token punctuation">&quot;</span></span> <span class="token attr-name">inactive-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#ff4949<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-switch</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>规格明细：<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuTable<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sku-table</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuTableRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuItemData.skuTableList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:uploadSkuImg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuForm.isUploadImg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:otherTableHeader</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherTableHeader<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:skuList</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>descartesData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sku-table</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-box<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span>  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>testSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>测试提交表单校验<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>item-box</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> ItemBox <span class="token keyword">from</span> <span class="token string">&quot;./components/item-box.vue&quot;</span>
<span class="token keyword">import</span> SkuItem <span class="token keyword">from</span> <span class="token string">&quot;./components/sku-item.vue&quot;</span>
<span class="token keyword">import</span> SkuTable <span class="token keyword">from</span> <span class="token string">&quot;./components/sku-table.vue&quot;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;el-table-sku&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    ItemBox<span class="token punctuation">,</span>
    SkuItem<span class="token punctuation">,</span>
    SkuTable
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">skuItemConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">canDelSkuName</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//是否可以删除规格名</span>
        <span class="token literal-property property">canDelSkuValue</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//是否可以删除规格值</span>
        <span class="token literal-property property">canAddSkuName</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//是否可以添加规格名</span>
        <span class="token literal-property property">canAddSkuValue</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">//是否可以添加规格值</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">skuList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">valueList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;天空蓝&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;101&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;草莓红&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;102&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;深夜黑&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;103&quot;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
          <span class="token literal-property property">valueList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;128G&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;201&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;256G&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;202&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;512G&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;203&quot;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//可选规格数据列表</span>
      <span class="token literal-property property">addSkuImg</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token literal-property property">productSkuInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">skuForm</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">testEdit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//测试编辑</span>
        <span class="token literal-property property">skuItem</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">//规格</span>
        <span class="token literal-property property">isUploadImg</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//是否上传图片</span>
        <span class="token literal-property property">skuTable</span><span class="token operator">:</span> <span class="token keyword">null</span> <span class="token comment">//规格表格</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">skuFormRules</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

      <span class="token literal-property property">descartesData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//根据规格返回的笛卡尔数组</span>
      <span class="token literal-property property">otherTableHeader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token string">&quot;价格&quot;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>

      <span class="token literal-property property">skuItemData</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//编辑时的数据</span>
        <span class="token literal-property property">skuInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//规格值数据</span>
        <span class="token literal-property property">skuTableList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">//表格数据</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">handleEditChange</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>skuForm<span class="token punctuation">.</span>isUploadImg <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>skuItemData <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">//编辑时的数据</span>
          <span class="token literal-property property">skuInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">valueList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                  <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;256G&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;202&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                  <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;200&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;内存&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;128G&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;201&quot;</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">valueList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                  <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;深夜黑&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;103&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">{</span>
                  <span class="token literal-property property">specName</span><span class="token operator">:</span> <span class="token string">&quot;颜色&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;100&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValue</span><span class="token operator">:</span> <span class="token string">&quot;天空蓝&quot;</span><span class="token punctuation">,</span>
                  <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;101&quot;</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>

          <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token literal-property property">skuTableList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">skuImg</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;../../public/imgs/css/1.png&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx100</span><span class="token operator">:</span> <span class="token string">&quot;深夜黑&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx200</span><span class="token operator">:</span> <span class="token string">&quot;256G&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">skuImg</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;../../public/imgs/css/2.png&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx100</span><span class="token operator">:</span> <span class="token string">&quot;天空蓝&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx200</span><span class="token operator">:</span> <span class="token string">&quot;256G&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token string">&quot;3&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">skuImg</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;../../public/imgs/css/3.png&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx100</span><span class="token operator">:</span> <span class="token string">&quot;深夜黑&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx200</span><span class="token operator">:</span> <span class="token string">&quot;128G&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token string">&quot;4&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">skuImg</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;../../public/imgs/css/4.png&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx100</span><span class="token operator">:</span> <span class="token string">&quot;天空蓝&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">syx200</span><span class="token operator">:</span> <span class="token string">&quot;128G&quot;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>skuItemData <span class="token operator">=</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">skuInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//规格值数据</span>
          <span class="token literal-property property">skuTableList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">//表格数据</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 删除规格值项
     * @param {*} data
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">deleteSkuValue</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
        <span class="token comment">//找到规格名</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>specNameId <span class="token operator">===</span> data<span class="token punctuation">.</span>specNameId<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          item<span class="token punctuation">.</span>valueList <span class="token operator">=</span> item<span class="token punctuation">.</span>valueList<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">valueItem</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> valueItem<span class="token punctuation">.</span>specValueId <span class="token operator">!==</span> data<span class="token punctuation">.</span>specValueId
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>skuList <span class="token operator">=</span> arr

      <span class="token comment">//清除已选规格中是此规格值的数据</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>skuItem<span class="token punctuation">.</span><span class="token function">filterSkuValue</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 删除规格名
     * @param {*} data 规格名对象
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">deleteSkuName</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//删除该规格项目</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>skuList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">skuItem</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> skuItem<span class="token punctuation">.</span>specNameId <span class="token operator">!==</span> data<span class="token punctuation">.</span>specNameId
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token comment">//清除已选规格中是此规格名的数据</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>skuItem<span class="token punctuation">.</span><span class="token function">filterSkuName</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 新增规格值
     * @param {*} item = {skuNameItem 规格名对象, specValue 规格值, index 索引}
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">addSkuValue</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&quot;新增规格值成功&quot;</span><span class="token punctuation">)</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">specName</span><span class="token operator">:</span> item<span class="token punctuation">.</span>skuNameItem<span class="token punctuation">.</span>specName<span class="token punctuation">,</span>
        <span class="token literal-property property">specNameId</span><span class="token operator">:</span> item<span class="token punctuation">.</span>skuNameItem<span class="token punctuation">.</span>specNameId<span class="token punctuation">,</span>
        <span class="token literal-property property">specValue</span><span class="token operator">:</span> item<span class="token punctuation">.</span>specValue<span class="token punctuation">,</span>
        <span class="token literal-property property">specValueId</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">const</span> specNameItem <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">itemSku</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> itemSku<span class="token punctuation">.</span>specNameId <span class="token operator">===</span> item<span class="token punctuation">.</span>skuNameItem<span class="token punctuation">.</span>specNameId
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      specNameItem<span class="token punctuation">.</span>valueList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>skuItem<span class="token punctuation">.</span><span class="token function">setSkuValueItem</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>skuNameItem<span class="token punctuation">.</span>valueList<span class="token punctuation">,</span> item<span class="token punctuation">.</span>index<span class="token punctuation">,</span> data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 添加规格项
     * @param {*} item = { specName规格名, index操作的规格名的索引}
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">addSkuName</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&quot;新增规格名成功&quot;</span><span class="token punctuation">)</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">valueList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token literal-property property">specName</span><span class="token operator">:</span> item<span class="token punctuation">.</span>specName<span class="token punctuation">,</span>
        <span class="token literal-property property">specNameId</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>skuItem<span class="token punctuation">.</span><span class="token function">setSkuNameItem</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>index<span class="token punctuation">,</span> data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 更改规格事件
     * @param {*} val
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">updateSkuInfo</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//获取笛卡尔积的数据列表</span>
      <span class="token keyword">let</span> dikaerParams <span class="token operator">=</span> val<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> item<span class="token punctuation">.</span>valueList
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>descartesData <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">descartes</span><span class="token punctuation">(</span>dikaerParams<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">/**
     * @description: 计算笛卡尔积的 方法
     * @param {*} arr
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">descartes</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> array <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> item<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>array <span class="token operator">||</span> <span class="token operator">!</span>array<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>array<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> array<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">[</span>item<span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>array<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">col<span class="token punctuation">,</span> <span class="token keyword">set</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        col<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          set<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">s</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> t <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token operator">?</span> c <span class="token operator">:</span> <span class="token punctuation">[</span>c<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            t<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
            res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> res<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> result
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 测试表单提交
     * @param {*}
     * @return {*}
     * @author: syx
     */</span>    
    <span class="token function">testSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>skuTableRef<span class="token punctuation">.</span>tableData<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">&quot;请先配置规格信息&quot;</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>skuTableRef<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&quot;表单校验通过&quot;</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">显示代码</span></div></div> <h2 id="涉及技术点"><a href="#涉及技术点" class="header-anchor">#</a> 涉及技术点</h2> <blockquote><p>图片裁剪<a href="/element-ui/el-cropper/">点击跳转图片裁剪</a></p></blockquote> <blockquote><p>el-select下拉选项新增删除按钮 <a href="/element-ui/el-table-sku/#el-select下拉选项新增删除按钮">点击前往</a></p></blockquote> <blockquote><p>阻止回车事件弹开的弹框会默认确认的问题<a href="/element-ui/el-table-sku/#阻止回车事件弹开的弹框会默认确认的问题">点击前往</a></p></blockquote> <blockquote><p>合并表格列相同项<a href="/element-ui/el-table-sku/#合并表格列相同项">点击前往</a></p></blockquote> <blockquote><p>动态表单校验问题<a href="/element-ui/el-table-sku/#动态表单校验问题">点击前往</a></p></blockquote> <blockquote><p>排列组合使用笛卡尔积<a href="/element-ui/el-table-sku/#排列组合使用笛卡尔积">点击前往</a></p></blockquote> <!----> <h2 id="el-select下拉选项新增删除按钮"><a href="#el-select下拉选项新增删除按钮" class="header-anchor">#</a> el-select下拉选项新增删除按钮</h2> <p>代码大致如下</p> <div class="language-vue extra-class"><pre class="language-vue"><code>            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">filterable</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择规格名<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>del-sku-name el-icon-delete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>del-sku-name el-icon-delete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>del-sku-name el-icon-delete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>首先设置好样式，由于选项列表是在body之外的，所以不能使用scoped 且为了避免影响全局样式，最好设置特殊的唯一的类名</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">&lt;style lang=&quot;less&quot;&gt;
.el-scrollbar</span> <span class="token punctuation">{</span>
  <span class="token selector">.select-list</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 34px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span>

    <span class="token selector">.del-sku-name</span> <span class="token punctuation">{</span>
      <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
      <span class="token property">right</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
      <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
      <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span><span class="token operator">-</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>style&gt;
</code></pre></div><p>由于使用filterable，可对选项进行过滤，此时过滤只会过滤 option ，但是 上面的 i 不会被过滤。会出现下图的情况</p> <p><strong>全部没有查找到的时候</strong></p> <p><img src="/assets/img/1.8f6f0928.png" alt="图片1"></p> <p><strong>查找到部分数据，未隐藏查不到的数据的垃圾桶</strong></p> <p><img src="/assets/img/2.b6c9bfb8.png" alt="图片2"></p> <p>因此最终less代码如下</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">&lt;style lang=&quot;less&quot;&gt;
.el-scrollbar</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;.is-empty</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.select-list</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 34px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span>

    <span class="token selector">.del-sku-name</span> <span class="token punctuation">{</span>
      <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
      <span class="token property">right</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
      <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
      <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span><span class="token operator">-</span>50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    .el<span class="token operator">-</span>select<span class="token operator">-</span>dropdown__item[style=<span class="token string">&quot;display: none;&quot;</span><span class="token selector">] + .del-sku-name</span><span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>style&gt;
</code></pre></div><h2 id="阻止回车事件弹开的弹框会默认确认的问题"><a href="#阻止回车事件弹开的弹框会默认确认的问题" class="header-anchor">#</a> 阻止回车事件弹开的弹框会默认确认的问题</h2> <p>当遇到回车键触发的 显示 elment的 confirm弹框时，可能会直接触发确认，导致用户无法点击取消该事件。解决方法如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$confirm</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">新增规格值【</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>specValue<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">】, 是否继续?</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">'提示'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">confirmButtonText</span><span class="token operator">:</span> <span class="token string">'确定'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">cancelButtonText</span><span class="token operator">:</span> <span class="token string">'取消'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span>
          <span class="token function">beforeClose</span><span class="token punctuation">(</span><span class="token parameter">action<span class="token punctuation">,</span> instance<span class="token punctuation">,</span> done</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>action <span class="token operator">==</span> <span class="token string">'confirm'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              instance<span class="token punctuation">.</span>$refs<span class="token punctuation">[</span><span class="token string">'confirm'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>$el<span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
              <span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                e <span class="token operator">=</span> e <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>detail <span class="token operator">!=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                  <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
         <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">&quot;您点击了确定&quot;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">&quot;您您点击了取消&quot;</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="合并表格列相同项"><a href="#合并表格列相同项" class="header-anchor">#</a> 合并表格列相同项</h2> <p>此功能展示大致如下</p> <p><img src="/assets/img/3.0e32ae29.png" alt="图片3"></p> <p>将列相同的值进行合并</p> <p>关键属性就是  el-table 的<code>span-method</code> 属性</p> <p>由于此处只对规格值进行合并，因此只需计算规格值需要合并的数据即可。</p> <div class="language-vue extra-class"><pre class="language-vue"><code>   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableData<span class="token punctuation">&quot;</span></span><span class="token attr-name">:span-method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>objectSpan<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span> 
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">// 合并行数</span>
    <span class="token function">objectSpan</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> row<span class="token punctuation">,</span> column<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> columnIndex <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//如果需要上传规格图片  则从 第二列开始 否则从第一列开始   然后进行规格列的长度 未经处理的默认为 rowspan: 1, colspan: 1</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>columnIndex <span class="token operator">&lt;</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>uploadSkuImg <span class="token operator">?</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>skuTableHeader<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">:</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>skuTableHeader<span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>columnIndex <span class="token operator">&gt;=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>uploadSkuImg <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> _row <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>uploadSkuImg <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>rowIndex<span class="token punctuation">]</span><span class="token punctuation">[</span>columnIndex <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>rowIndex<span class="token punctuation">]</span><span class="token punctuation">[</span>columnIndex<span class="token punctuation">]</span>
        <span class="token keyword">const</span> _col <span class="token operator">=</span> _row <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">rowspan</span><span class="token operator">:</span> _row<span class="token punctuation">,</span>
          <span class="token literal-property property">colspan</span><span class="token operator">:</span> _col
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">//计算位置的方法 来得到 spanArr 数列</span>
    <span class="token function">getSpanArr</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token keyword">let</span> posObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
      <span class="token comment">//遍历表格行数</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span>
        <span class="token comment">//存储要合并的数据</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token comment">//遍历规格列数</span>
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>skuTableHeader<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">//如果是第一行 先定义个 占用 1格</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
            posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">//标记位置为 第一行</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token comment">// 判断当前元素与上一个元素是否相同 如果相同，此行的span设置为占用0格  上一行的占用格数 +1</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> data<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">+=</span> <span class="token number">1</span> <span class="token comment">//将第一个出现该值的 格子+1个占用格</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
              posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> i <span class="token comment">//没出现一样的，位置重新标记</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
          j<span class="token operator">++</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre></div><p>先计算位置 getSpanArr，比如想要得到如下所示的结果</p> <p><img src="/assets/img/4.e3113060.jpg" alt="图片4"></p> <p>想要得到上面的显示效果，需要获得数据 spanArr 为 如下数据</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">spanArr</span><span class="token operator">:</span> <span class="token punctuation">[</span>
	<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
	<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
	<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
	<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span>
</code></pre></div><p>最外层的数据的长度表示有几行</p> <p>第一行的 [2, 1] 表示 第一行的第一格子占用 2个高度的格子，第一行的第二个格子占用1个高度的格子。</p> <p>第二行的 [0, 1] 表示 第二行的第一格子占用 0个高度的格子（因为已经被第一行给占了，如果非0会导致表格错位），第二行的第二个格子占用1个高度的格子。</p> <p>以此类推</p> <p>上述方法就是为了获取 spanArr的方法，然后又由于涉及是否上传规格图片，所以得判断。</p> <h3 id="正常对所有表格列都进行相同项合并的话代码如下"><a href="#正常对所有表格列都进行相同项合并的话代码如下" class="header-anchor">#</a> 正常对所有表格列都进行相同项合并的话代码如下</h3> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">// 合并行数</span>
    <span class="token function">objectSpan</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> row<span class="token punctuation">,</span> column<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> columnIndex <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> _row <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>rowIndex<span class="token punctuation">]</span><span class="token punctuation">[</span>columnIndex<span class="token punctuation">]</span>
        <span class="token keyword">const</span> _col <span class="token operator">=</span> _row <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">rowspan</span><span class="token operator">:</span> _row<span class="token punctuation">,</span>
          <span class="token literal-property property">colspan</span><span class="token operator">:</span> _col
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">//计算位置的方法 来得到 spanArr 数列   val 为表格数据</span>
    <span class="token function">getSpanArr</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token keyword">let</span> posObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
      <span class="token comment">//遍历表格行数</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span>
        <span class="token comment">//存储要合并的数据</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token comment">//遍历规格列数</span>
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">//如果是第一行 先定义个 占用 1格</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
            posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">//标记位置为 第一行</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token comment">// 判断当前元素与上一个元素是否相同 如果相同，此行的span设置为占用0格  上一行的占用格数 +1</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> data<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">+=</span> <span class="token number">1</span> <span class="token comment">//将第一个出现该值的 格子+1个占用格</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
              posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> i <span class="token comment">//没出现一样的，位置重新标记</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
          j<span class="token operator">++</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre></div><div class="demo-block demo-element-ui demo-"><div class="source-bg" style="padding:24px;"><div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width:100%;"><div class="hidden-columns"><div></div> <div></div> <div></div></div><div class="el-table__header-wrapper"><table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:;"><colgroup></colgroup><thead><tr></tr></thead></table></div><div class="el-table__body-wrapper is-scrolling-none"><table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width:;"><colgroup></colgroup><tbody><tr class="el-table__row"></tr><tr class="el-table__row"></tr><tr class="el-table__row"></tr><tr class="el-table__row"></tr><!----></tbody></table><!----><!----></div><!----><!----><!----><!----><div class="el-table__column-resize-proxy" style="display:none;"></div></div></div> <div class="meta"><div class="description"><p>本示例为使用上述代码对表格相邻列的值一样进行合并</p></div> <div class="sourceCode"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:span-method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>objectSpan<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>180<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>姓名<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>180<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>address<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>地址<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;el-table-span-method&quot;</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">spanArr</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">tableData</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'2016-05-02'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'王小虎'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">'上海市普陀区金沙江路 1518 弄'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'2016-05-02'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'王小难'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">'上海市普陀区金沙江路 1519 弄'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'2016-05-01'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'王小虎'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">'上海市普陀区金沙江路 1519 弄'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'2016-05-02'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'王小虎'</span><span class="token punctuation">,</span>
          <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">'上海市普陀区金沙江路 1516 弄'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getSpanArr</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>tableData<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 合并行数</span>
    <span class="token function">objectSpan</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> row<span class="token punctuation">,</span> column<span class="token punctuation">,</span> rowIndex<span class="token punctuation">,</span> columnIndex <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> _row <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>rowIndex<span class="token punctuation">]</span><span class="token punctuation">[</span>columnIndex<span class="token punctuation">]</span>
      <span class="token keyword">const</span> _col <span class="token operator">=</span> _row <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">rowspan</span><span class="token operator">:</span> _row<span class="token punctuation">,</span>
        <span class="token literal-property property">colspan</span><span class="token operator">:</span> _col
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">//计算位置的方法 来得到 spanArr 数列   val 为表格数据</span>
    <span class="token function">getSpanArr</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token keyword">let</span> posObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
      <span class="token comment">//遍历表格行数</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span>
        <span class="token comment">//存储要合并的数据</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token comment">//遍历规格列数</span>
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">//如果是第一行 先定义个 占用 1格</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
            posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">//标记位置为 第一行</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token comment">// 判断当前元素与上一个元素是否相同 如果相同，此行的span设置为占用0格  上一行的占用格数 +1</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> data<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">+=</span> <span class="token number">1</span> <span class="token comment">//将第一个出现该值的 格子+1个占用格</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>spanArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span>
              posObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> i <span class="token comment">//没出现一样的，位置重新标记</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
          j<span class="token operator">++</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">显示代码</span></div></div> <h2 id="动态表单校验问题"><a href="#动态表单校验问题" class="header-anchor">#</a> 动态表单校验问题</h2> <p>此处配置了最简单的规格设置，只设置了一个价格配置项。价格就涉及到校验填写内容是否正确，就需要做到校验，按以往form添加rule对此处已不再适用，研究许久，可自己判断并设置校验错误信息。</p> <p><img src="" alt=""></p> <div class="language-vue extra-class"><pre class="language-vue"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>skuTableForm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tablehead.length<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:span-method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>objectSpan<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>160px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showUploadImg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>format.imgField<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>format.imgName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">:error</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row[<span class="token punctuation">'</span>error<span class="token punctuation">'</span> + key]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row[key]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span> <span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableValueBlur(scope.row, key)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableValueChange(scope.row, key, item)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>请输入<span class="token punctuation">'</span> + item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code> <span class="token comment">/**
     * @description: 触发表单校验
     * @param {*} row
     * @param {*} key
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">tableValueChange</span><span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> key<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>row<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        row<span class="token punctuation">[</span><span class="token string">'error'</span> <span class="token operator">+</span> key<span class="token punctuation">]</span> <span class="token operator">=</span> item <span class="token operator">+</span> <span class="token string">'不能为空'</span>
        <span class="token keyword">return</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d+(\.\d+)?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        row<span class="token punctuation">[</span><span class="token string">'error'</span> <span class="token operator">+</span> key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'请输入正确格式的'</span> <span class="token operator">+</span> item
        <span class="token keyword">return</span>
      <span class="token punctuation">}</span>
      row<span class="token punctuation">[</span><span class="token string">'error'</span> <span class="token operator">+</span> key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">''</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">/**
     * @description: 失去焦点事件
     * @param {*} row
     * @param {*} key
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">tableValueBlur</span><span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>row<span class="token punctuation">[</span><span class="token string">'error'</span> <span class="token operator">+</span> key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        row<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>这样就会当输入框输入的时候触发校验并会及时显示错误信息。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>缺点：validate方法不能触发校验，需要手工触发校验。</p></div> <h2 id="排列组合使用笛卡尔积"><a href="#排列组合使用笛卡尔积" class="header-anchor">#</a> 排列组合使用笛卡尔积</h2> <p>填写规格名，就会排列组合成多种多样的商品，于是需要用到计算笛卡尔积的方法，具体方法如下</p> <div class="language-js extra-class"><pre class="language-js"><code>    <span class="token comment">/**
     * @description: 计算笛卡尔积的 方法
     * @param {*} arr
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">descartes</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> array <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> item<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>array <span class="token operator">||</span> <span class="token operator">!</span>array<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>array<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> array<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token punctuation">[</span>item<span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>array<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">col<span class="token punctuation">,</span> <span class="token keyword">set</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        col<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          set<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">s</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> t <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token operator">?</span> c <span class="token operator">:</span> <span class="token punctuation">[</span>c<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            t<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
            res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> res<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> result
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>通过笛卡尔列表制作表格数据</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
     * @description: 获取笛卡尔列表数据
     * @param {*}
     * @return {*}
     * @author: syx
     */</span>
    <span class="token function">descartesArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> descartesTable <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>skuList<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
        <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> item<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> childItem <span class="token operator">=</span> item<span class="token punctuation">[</span>j<span class="token punctuation">]</span>
          <span class="token comment">//解决id存数字的话  对象会被重新排序</span>
          obj<span class="token punctuation">[</span><span class="token string">&quot;syx&quot;</span> <span class="token operator">+</span> childItem<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>format<span class="token punctuation">.</span>specNameId<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> childItem<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>format<span class="token punctuation">.</span>specValue<span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        descartesTable<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> descartesTable
    <span class="token punctuation">}</span>
</code></pre></div><h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>一个规格列表，耗掉半管血。difficult，关注微信公众号【爆米花小布】，不用再造轮子啦。如有bug，也可通过公众号进行反馈。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/element-ui/el-table-select-all/" class="prev">
        使用el-table实现全选功能
      </a></span> <span class="next"><a href="/element-ui/el-cropper/">
        利用vue-cropper实现图片裁剪功能
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><!----></div></div>
    <script src="/assets/js/app.36e8cb25.js" defer></script><script src="/assets/js/2.cd8e88cf.js" defer></script><script src="/assets/js/8.6c6d5662.js" defer></script>
  </body>
</html>
